<script setup>
import { ref, computed, reactive } from 'vue'
import api from "@/api/api"
import cleanIcon from "@/assets/home/clean.png"


// 响应式数据
const list = ref([])
const loading = ref(false)
const finished = ref(false)
const pageInfo = reactive({
  pageNum: 1,
  pageSize: 20,
})

// 计算属性
const count = computed(() => {
  return list.value.filter((item) => item.status === 0).length
})

// 方法
const onLoad = () => {
  getSystemMessage()
}

const getSystemMessage = async () => {
  loading.value = true
  try {
    let res = await api.message.systemLog(pageInfo)
    list.value = [...list.value, ...res.data]
    list.value.sort((a, b) => {
      if (a.status == 0 && b.status == 0) return -1
      if (a.status != 0 && b.status == 0) return 1
      return new Date(b.createTime) - new Date(a.createTime)
    })
    if (res.data.length < pageInfo.pageSize) {
      finished.value = true
    }
  } finally {
    loading.value = false
  }
}

const readOneMessage = async (v) => {
  await api.message.readOneSystemMessage({ id: v.id })
  for (let i = 0; i < list.value.length; i++) {
    if (v.id === list.value[i].id) {
      list.value[i].status = 1
    }
  }
}

const readAllMessage = async () => {
  await api.message.readSystemMessage()
  for (let i = 0; i < list.value.length; i++) {
    list.value[i].status = 1
  }
}
</script>

<template>
  <div class="message">
    <van-nav-bar title=" 服务通知" class="nav_bar" fixed>
      <template #right>
        <div class="nav_right">
          <van-image class="pic" :src="cleanIcon" />
          <van-badge v-if="count > 0" :content="count" max="99">
            <div class="nacv_text" @click="readAllMessage">清空未读</div>
          </van-badge>
          <div v-else class="nacv_text" @click="readAllMessage">清空未读</div>
        </div>
      </template>
    </van-nav-bar>
    <div class="main">
      <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-badge v-for="(v, i) in list" :key="i" :dot="v.status == 0" color="#ee0a24">
          <div class="message_item" @click="readOneMessage(v)">
            <div class="message_top">
              <div class="type">{{ v.title }}</div>
              <div class="time">{{ v.createTime }}</div>
            </div>
            <div class="message_text">{{ v.message }}</div>
          </div>
        </van-badge>
        <van-empty v-if="!loading && list.length == 0" description="暂无通知" />
      </van-list>
    </div>
  </div>
</template>



<style lang="less" scoped>
.message {
  height: 100vh;
  background: url("https://zxcxappimg.oss-cn-hangzhou.aliyuncs.com//zxcxmall/2025/05/29/4431a33cd62f4efc9fc53a7606eee382.png") no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  box-sizing: border-box;
  padding: 200px 50px 150px 50px;

  :deep(.van-nav-bar__content) {
    height: 100px;
    margin: 25px auto;
  }

  :deep(.van-nav-bar__title) {
    font-size: 54px;
    font-weight: 500;
  }

  :deep(.van-ellipsis) {
    overflow: initial;
  }

  .nav_bar {
    :deep(.van-icon) {
      font-size: 50px;
      font-weight: bold;
      color: #333333;
    }

    .nav_right {
      display: flex;
      align-items: center;
      margin: 0 20px;

      .pic {
        width: 43px;
        height: 49px;
        margin-right: 10px;
      }

      .nacv_text {
        font-size: 36px;
        color: #3c3c3c;
      }
    }
  }

  .main {
    padding: 30px 15px 0 15px;

    :deep(.van-badge__wrapper) {
      width: 100%;
    }

    .message_item {
      padding: 70px 50px;
      background: #fff;
      border-radius: 20px;
      margin-bottom: 30px;

      .message_top {
        display: flex;
        justify-content: space-between;

        .type {
          font-size: 50px;
          color: #303030;
        }

        .time {
          font-size: 40px;
          color: #888888;
        }
      }

      .message_text {
        font-size: 40px;
        color: #888888;
        margin-top: 20px;
      }
    }
  }
}

:deep(.van-empty__image) {
  width: 600px;
  height: 600px;
}

:deep(.van-empty__description) {
  font-size: 42px;
}

:deep(.van-list__finished-text) {
  font-size: 42px;
}
</style>
